<template>
  <div class="width1200 margin-center mgt-20 ">
    <div class="breadcrumb flex-center">
      <p class="title">申请名师认证</p>
    </div>
    <div class="box">
      <div class="content" v-if="currType==1">
        <div>
          <div class="title_text">
            申请名师认证:
          </div>
          <div class="btns">
            <div class="close_btn">取消</div>
            <div class="confim_btn">确认</div>
          </div>
        </div>
        <div>
          <img src="../../assets/img/banner@2x.png" alt="">
        </div>
      </div>
      <div class="content_ok" v-else>
        <img src="../../assets/img/success.png" alt="" class="success_img">
        <p class="text_ok">申请成功</p>
        <p class="info_text">感谢您的申请，我们会尽快给您联系，谢谢~</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currType: 2,
      headImg: require("../../assets/img/图层 678@2x.png"),
      list: {
        img: require("../../assets/img/图层 10 拷贝@2x.png"),
        name: "李焦",
        sex: '女',
        organisation: '成都市泡桐树小学',
        tag: "基础班,—年级上册,第一单元",
        date: "2021-03-10",
      },
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
// @import "../assets/css/variable.less";
.info_text {
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-top: 14px;
}
.text_ok {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-top: 12px;
}
.success_img {
  width: 100px;
  height: 100px;
}
.btns {
  display: flex;
  justify-content: center;
  align-items: center;
}
.close_btn {
  margin-right: 20px;
  width: 221px;
  height: 35px;
  border: 1px solid #d8d8d8;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.confim_btn {
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 220px;
  height: 34px;
  background: #cb3e3e;
  opacity: 0.5;
  border-radius: 2px;
  color: white;
}
.cover {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}
.box {
  box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
  border-radius: 7px 7px 7px 7px;
  padding: 30px;
  // height: 550px;
}
.title_text {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #4e4e4e;
  margin-bottom: 60px;
}
.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  // border: 1px red solid;
  height: 550px;
}
.content_ok {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  // border: 1px red solid;
  height: 288px;
}
</style>